<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>版本管理系统 - 管理界面</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        .notification {
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            display: none;
        }
        
        .notification.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .notification.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .form-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 16px;
        }
        
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #2980b9;
        }
        
        .btn-delete {
            background-color: #e74c3c;
        }
        
        .btn-delete:hover {
            background-color: #c0392b;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .actions {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>版本管理系统</h1>
        
        <div id="notification" class="notification"></div>
        
        <div class="form-section">
            <h2>添加新版本</h2>
            <form id="versionForm">
                <div class="form-group">
                    <label for="versionId">版本ID</label>
                    <input type="text" id="versionId" required>
                </div>
                
                <div class="form-group">
                    <label for="versionName">版本名称</label>
                    <input type="text" id="versionName" required>
                </div>
                
                <div class="form-group">
                    <label for="versionDate">发布日期</label>
                    <input type="date" id="versionDate" required>
                </div>
                
                <div class="form-group">
                    <label for="versionDesc">版本描述</label>
                    <textarea id="versionDesc" rows="3"></textarea>
                </div>
                
                <button type="submit">添加版本</button>
            </form>
        </div>
        
        <div class="versions-section">
            <h2>版本列表</h2>
            <table id="versionsTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>发布日期</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="versionsBody">
                    <!-- 版本数据将通过JS动态加载 -->
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // DOM元素
        const versionForm = document.getElementById('versionForm');
        const versionsBody = document.getElementById('versionsBody');
        const notification = document.getElementById('notification');
        
        // 显示通知
        function showNotification(message, isSuccess = true) {
            notification.textContent = message;
            notification.className = isSuccess ? 'notification success' : 'notification error';
            notification.style.display = 'block';
            
            // 3秒后隐藏通知
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }
        
        // 获取版本列表
        async function fetchVersions() {
            try {
                const response = await fetch('/api/versions');
                if (!response.ok) {
                    throw new Error('获取版本数据失败');
                }
                return await response.json();
            } catch (error) {
                console.error('获取版本数据失败:', error);
                showNotification('获取版本数据失败: ' + error.message, false);
                return [];
            }
        }
        
        // 添加新版本
        async function addVersion(versionData) {
            try {
                const response = await fetch('/api/versions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(versionData)
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '添加版本失败');
                }
                
                return await response.json();
            } catch (error) {
                console.error('添加版本失败:', error);
                showNotification('添加版本失败: ' + error.message, false);
                return null;
            }
        }
        
        // 更新版本
        async function updateVersion(id, versionData) {
            try {
                const response = await fetch(`/api/versions/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(versionData)
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '更新版本失败');
                }
                
                return await response.json();
            } catch (error) {
                console.error('更新版本失败:', error);
                showNotification('更新版本失败: ' + error.message, false);
                return null;
            }
        }
        
        // 删除版本
        async function deleteVersion(id) {
            try {
                const response = await fetch(`/api/versions/${id}`, {
                    method: 'DELETE'
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '删除版本失败');
                }
                
                return true;
            } catch (error) {
                console.error('删除版本失败:', error);
                showNotification('删除版本失败: ' + error.message, false);
                return false;
            }
        }
        
        // 渲染版本列表
        function renderVersions(versions) {
            versionsBody.innerHTML = '';
            
            if (versions.length === 0) {
                versionsBody.innerHTML = '<tr><td colspan="5">暂无版本数据</td></tr>';
                return;
            }
            
            versions.forEach(version => {
                const row = document.createElement('tr');
                
                row.innerHTML = `
                    <td>${version.id}</td>
                    <td>${version.name}</td>
                    <td>${version.date}</td>
                    <td>${version.desc || ''}</td>
                    <td class="actions">
                        <button class="btn-edit" data-id="${version.id}">编辑</button>
                        <button class="btn-delete" data-id="${version.id}">删除</button>
                    </td>
                `;
                
                versionsBody.appendChild(row);
            });
            
            // 添加编辑事件
            document.querySelectorAll('.btn-edit').forEach(btn => {
                btn.addEventListener('click', async () => {
                    const versionId = btn.dataset.id;
                    const versions = await fetchVersions();
                    const version = versions.find(v => v.id === versionId);
                    
                    if (version) {
                        // 填充表单
                        document.getElementById('versionId').value = version.id;
                        document.getElementById('versionName').value = version.name;
                        document.getElementById('versionDate').value = version.date;
                        document.getElementById('versionDesc').value = version.desc || '';
                        
                        // 更改表单为更新模式
                        versionForm.dataset.mode = 'update';
                        versionForm.dataset.id = versionId;
                        versionForm.querySelector('button').textContent = '更新版本';
                    }
                });
            });
            
            // 添加删除事件
            document.querySelectorAll('.btn-delete').forEach(btn => {
                btn.addEventListener('click', async () => {
                    const versionId = btn.dataset.id;
                    
                    if (confirm(`确定要删除版本 ${versionId} 吗？`)) {
                        const success = await deleteVersion(versionId);
                        if (success) {
                            showNotification('版本删除成功');
                            loadVersions();
                        }
                    }
                });
            });
        }
        
        // 加载并渲染版本列表
        async function loadVersions() {
            const versions = await fetchVersions();
            renderVersions(versions);
        }
        
        // 表单提交处理
        versionForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const versionData = {
                id: document.getElementById('versionId').value,
                name: document.getElementById('versionName').value,
                date: document.getElementById('versionDate').value,
                desc: document.getElementById('versionDesc').value
            };
            
            if (versionForm.dataset.mode === 'update') {
                // 更新模式
                const versionId = versionForm.dataset.id;
                const updatedVersion = await updateVersion(versionId, versionData);
                
                if (updatedVersion) {
                    showNotification('版本更新成功');
                    // 重置表单
                    versionForm.reset();
                    delete versionForm.dataset.mode;
                    delete versionForm.dataset.id;
                    versionForm.querySelector('button').textContent = '添加版本';
                    loadVersions();
                }
            } else {
                // 添加模式
                const newVersion = await addVersion(versionData);
                
                if (newVersion) {
                    showNotification('版本添加成功');
                    // 重置表单
                    versionForm.reset();
                    loadVersions();
                }
            }
        });
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadVersions();
        });
    </script>
</body>
</html>
